<template>
    <div class="app-container" v-loading="loading">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">修改学校</div>
            <el-form label-width="130px" class="app-content form" :rules="rules" :model="ruleForm" ref="ruleForm">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">学校信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="学校级别" prop="schoolLevel">
                                    <el-select v-model="ruleForm.schoolLevel" placeholder="请选择" style="width:95%">
                                        <el-option v-for="item in dataNewId" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="ruleForm.schoolLevel=='1'">
                                <el-form-item label="父校名称" prop="headSchoolName">
                                    <headerSchool v-model="ruleForm.headSchoolName" :fxSchoolId="ruleForm.schoolId" style="width:95%" @change='schoolChange' ></headerSchool>
                                </el-form-item>  
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="学校名称" prop="schoolName">
                                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于20个">
                                        <el-input v-model="ruleForm.schoolName" placeholder="请输入学校名字" :maxlength="20" slot="reference" style="width:95%"></el-input>
                                    </el-popover>    
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="schoolAddress">
                                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于30个">
                                        <el-input v-model="ruleForm.schoolAddress" placeholder="请输入学校地址" :maxlength="30" slot="reference" style="width:95%"></el-input>
                                    </el-popover>    
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="7">
                                <el-form-item  label="是否培训机构：">
                                    <span v-if="ruleForm.isOrganId=='1'">是</span>
                                    <span v-if="ruleForm.isOrganId=='0'">否</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7" :offset="1" v-if="ruleForm.isOrganId=='0'">
                                <el-form-item label="学校类型：">
                                    <span>{{ruleForm.typeName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="1" v-if="ruleForm.isOrganId=='0'">
                                <el-form-item label="学年制：">
                                    <span>{{ruleForm.yearStstemIdName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                            <el-form-item label="所属省" prop="fProvinceId" >
                                    <province v-model="ruleForm.fProvinceId" style="width:91.5%"></province>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属市" prop="fCityId">
                                    <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" style="width:91.5%"></city>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属区县" prop="fAreaId">
                                    <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" style="width:91.5%"></region>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="footer">
                        <el-button @click="resetForm">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">确认</el-button>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
 
<script>
import Levelbar from '../layout/Levelbar';
import {querySchoolType, querySchoolYearByPeriodId, modifySchool, querySchoolInfo} from 'api/schoolManage';
import { queryAllProvince, queryAllCityByProvinceId, queryAllAreaByCityId } from 'api/common';
import { mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import headerSchool from 'components/SchoolClasss/headerSchool';
export default{
    name: 'modifySchool',
    components: {Levelbar, province, city, region, headerSchool},
    data() {
        var judgeSchoolName = (rule, value, callback) => {
            if (value =='') {
                callback(new Error('请输入总校名称'));
            } else if (this.ruleForm.headSchoolId=='') {
                callback(new Error('总校不存在'));
            } else {
                callback();
            }
        };
        return {
            dataNewId: [
                {
                    name: '总校',
                    id: '0'
                },
                {
                    name: '分校',
                    id: '1'
                }
            ],
            loading: true,
            loadingBtn: false,
            schoolLoading: false,
            ruleForm: {
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                province: [],
                findCity: [],
                findArea: [],
                schoolId: '',
                schoolLevel: '0',
                headSchoolId: '',
                headSchoolName: '',
                schoolAddress: '',
                isOrganId: '',
                typeSchoolId: '',
                location: '',
                yearStstemId: '',
                yearStstem: [],
                isclick: '',
                isProvice: '',
                isYearStstemId: '',
                yearStstemIdName: '',
                typeName: '',
                schoolNameList: [],
                isOrgan: [
                    {
                        value: '1',
                        name: '是'
                    },
                    {
                        value: '0',
                        name: '否'
                    }
                ]
            },
            rules: {
                schoolLevel: [
                    {required: true, message: '请选择学校级别', trigger: 'blur'}
                ],
                headSchoolName: [
                    { required: true, validator: judgeSchoolName }
                ],
                schoolName: [
                    { required: true, message: '请输入学校名字', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                fProvinceId: [
                    { required: true, message: '所属省不能为空', trigger: 'change' }
                ],
                fCityId: [
                    { required: true, message: '所属市不能为空', trigger: 'change' }
                ],
                fAreaId: [
                    { required: true, message: '所属区不能为空', trigger: 'change' }
                ],
                yearStstemId: [
                    { required: true, message: '请选择学年制', trigger: 'change' }
                ],
                schoolAddress: [
                    { required: true, message: '请输入学校地址', trigger: 'blur' }
                ]
 
            }
        }
    },
    created() {
        this.searchProvice();
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn = true;
                        modifySchool(
                    this.$route.params.schoolId,
                    this.uid,
                    this.ruleForm.schoolLevel,
                    this.ruleForm.headSchoolId,
                    this.ruleForm.typeSchoolId,
                    this.ruleForm.typeName,
                    this.ruleForm.schoolName,
                    this.ruleForm.isOrganId,
                    this.ruleForm.yearStstemId,
                    this.ruleForm.fProvinceId,
                    this.ruleForm.fCityId,
                    this.ruleForm.fAreaId,
                    this.ruleForm.schoolAddress,
                    ).then(response => {
                        this.loadingBtn = false;
                        this.$message({
                            type: 'success',
                            message: response.data.errorMsg
                        })
                        this.$store.dispatch('UpdateCache', true);// 修改 和查看
                        this.$router.push({path: '/schoolManage'});
                    }).catch(() => {
                        this.loadingBtn = false;
                    });
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                } else {
                    return false;
                }
            });
        },
    // 查询修改信息
        searchInfo() {
            querySchoolInfo(this.$route.params.schoolId).then(response => {
                if (response.data.status==200) {
                    this.loading = false;
                    this.ruleForm.schoolId = response.data.content.schoolId;
                    this.ruleForm.schoolName = response.data.content.schoolName;
                    this.ruleForm.isOrganId = response.data.content.isOrg;
                    this.ruleForm.schoolLevel = response.data.content.schoolLevel;
                    this.ruleForm.fProvinceId = response.data.content.provinceId;
                    this.ruleForm.fCityId = response.data.content.cityId;
                    this.ruleForm.fAreaId = response.data.content.areaId;
                    this.ruleForm.schoolAddress = response.data.content.detail;
                    this.ruleForm.typeSchoolId = response.data.content.periodId;
                    this.isYearStstemId = response.data.content.schoolYear;
                    this.ruleForm.headSchoolName = response.data.content.parentName===null ? '' :response.data.content.parentName;
                    this.ruleForm.headSchoolId = response.data.content.parentId;
                    if (this.ruleForm.typeSchoolId != '') {
                        let obj = this.ruleForm.typeSchool.find((item) => {
                            return item.schoolTypeId == this.ruleForm.typeSchoolId;
                        });
                        this.ruleForm.typeName = obj.typeName;
                    }
                    if (this.ruleForm.isOrganId=='0') {
                        querySchoolYearByPeriodId(this.ruleForm.typeSchoolId).then(response => {
                            response.data.content.forEach((item, index) => {
                                if (item.typeValue >= this.isYearStstemId) {
                                    this.ruleForm.yearStstem.push(item)
                                }
                            });
                            this.ruleForm.yearStstemId = this.isYearStstemId;
                            let obj2 = response.data.content.find((item) => {
                                return item.typeValue == this.ruleForm.yearStstemId;
                            });
                            this.ruleForm.yearStstemIdName = obj2.typeName
                        });
                    }
                    this.isclick = '1';// 避免学校类型被清空
                    this.isProvice = '1';// 判断省市区是否加载完毕
                }
            });
        },
    // 省市区选择
        searchProvice() {
            queryAllProvince().then(response => {
                let findProvice = response.data.content;
                let select = {
                    provinceName: '请选择',
                    provinceId: ''
                }
                findProvice.unshift(select);
                this.ruleForm.province = findProvice;
                this.ruleForm.fProvinceId = findProvice[0].provinceId;
            }).then(response => {
                this.getSchoolType();
            });
        },
        changeProvice(a) {
            if (this.isProvice == '') {
                this.ruleForm.findCity = [];
                this.ruleForm.findArea = [];
                this.ruleForm.fCityId = '';
                this.ruleForm.fAreaId = '';
            }
            if (a=='') {
                return;
            }
            queryAllCityByProvinceId(a).then(response => {
                let findCity = response.data.content;
                let select = {
                    cityName: '请选择',
                    cityId: ''
                }
                findCity.unshift(select);
                this.ruleForm.findCity = findCity;
    
            });
        },
        changeCityId(a) {
            if (this.isProvice == '') {
                this.ruleForm.findArea = [];
                this.ruleForm.fAreaId = '';
                this.isProvice = '1';
            }
            if (a=='') {
                return;
            }
            queryAllAreaByCityId(a).then(response => {
                let findArea = response.data.content;
                let select = {
                    areaName: '请选择',
                    areaId: ''
                }
                findArea.unshift(select);
                this.ruleForm.findArea = findArea;
            });
        },
    // 模糊查询父校名称
        schoolChange(val) {
            this.ruleForm.headSchoolId = val
        },
        changeIsOrganId(a) {
            if (this.isclick=='1') {
                this.isclick = '';
                return;
            }
            this.ruleForm.typeSchoolId = '';
            this.ruleForm.yearStstemId = '';
            this.ruleForm.typeName = '';
        },
    // 查询学校类型
        getSchoolType() {
            querySchoolType().then(response => {
                if (response.data.status==200) {
                    this.ruleForm.typeSchool = response.data.content;
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            }).then(response => {
                this.searchInfo();
            });
        },
        changeType(a) {
            if (a=='') {
                return;
            }
            querySchoolYearByPeriodId(a).then(response => {
                if (response.data.status==200) {
                    this.ruleForm.yearStstem = response.data.content;
                    this.ruleForm.yearStstemId = response.data.content[0].typeValue;
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },
    // 跳转
        resetForm() {
            this.$router.push({path: '/schoolManage'});  
        }  
    
    }
}
</script>
 
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
        // .form-content{
        //     margin-left:20px
        // }
        .form-item {
            padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
            }
        }
        .subjectKuang{
            padding:5px 5px 40px 5px;
            width:470px;
        }
        .el-tag{
            margin-left:10px;
            background:#f9f9f9;
            color:#444;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
        }
      }
    }
  }
}
 
</style>